<template>
  <div class="index-container">
    <el-row :gutter="15">
      <page-header />
    </el-row>
  </div>
</template>

<script>
  import PageHeader from './components/PageHeader'
  // import News from './components/News'
  // import Plan from './components/Plan'
  // import Access from './components/Access'
  // import Authorization from './components/Authorization'
  // import ChinaMap from './components/ChinaMap'
  // import IconList from './components/IconList'
  // import MyProject from './components/MyProject'
  // import VersionInformation from './components/VersionInformation'

  export default defineComponent({
    name: 'Index',
    components: {
      PageHeader,
      // News,
      // Plan,
      // Access,
      // Authorization,
      // ChinaMap,
      // VersionInformation,
      // IconList,
      // MyProject,
    },
    setup() {
      const state = reactive({
        tableData: [
          {
            date: '2024-03-04',
            name: '您有一个客户商机需要跟踪',
            address: '高阳三利毛巾纺织有限公司',
          },
          {
            date: '2024-03-31',
            name: '您有一个客户合同需要确认收款',
            address: '河北博为电力科技有限公司',
          },
          {
            date: '2024-03-31',
            name: '您有一个客户合同需要确认开票',
            address: '河北优耐特电力科技有限公司',
          },
          {
            date: '2024-03-31',
            name: '您有一个业务合同需要审核分单',
            address: '保定澳美服装有限公司',
          },
          {
            date: '2024-03-04',
            name: '您有一个客户商机需要跟踪',
            address: '高阳三利毛巾纺织有限公司',
          },
          {
            date: '2024-03-31',
            name: '您有一个客户合同需要确认收款',
            address: '河北博为电力科技有限公司',
          },
        ],
      })

      return {
        ...toRefs(state),
      }
    },
  })
</script>

<style lang="scss" scoped>
  .index-container {
    padding: 10 !important;
    background: $base-color-background !important;

    :deep() {
      .page-header {
        margin-bottom: 20px;
      }

      .access,
      .authorization,
      .version-information {
        min-height: 268px;
        margin-bottom: 20px;
      }

      .el-card {
        .el-card__header {
          position: relative;

          .card-header-tag {
            position: absolute;
            top: 15px;
            right: $base-margin;
          }

          > div > span {
            display: flex;
            align-items: center;

            i {
              margin-right: 3px;
            }
          }
        }

        .el-card__body {
          position: relative;

          .echarts {
            width: 100%;
            height: 127px;
          }

          .card-footer-tag {
            position: absolute;
            right: $base-margin;
            bottom: 15px;
          }
        }
      }

      .bottom {
        padding-top: 20px;
        margin-top: 5px;
        color: #595959;
        text-align: left;
        border-top: 1px solid $base-border-color;
      }
    }
  }
</style>
